/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Button,
    InputLine,
    Input,
    TextArea,
    Select,
    InputDatalist,
    Text,
    CheckSwitch,
    SuffixInput,
    useTheme,
    LineColumn, Table, TableRow, CCell, TableBody, BlobInputList,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps, SelectHookfork, SelectInput, useItemInputControl
} from "../../common/base";
import {Each_ZdSetting, useRepTableEditor, useTableEditor,} from "../../hook/useRepTableEditor";
import {useMeasureInpFilter} from "../../common/hooks";
import {measurementRender} from "../../common/measure";
import {calcAverageArrObj, floatInterception} from "../../../common/tool";

export const 现场结果选=["符合要求","不符合要求"];
//下结论页面：
export const ItemConclusion=
    React.forwardRef((
        { children, show ,alone=true,refWidth}:InternalItemProps,  ref
    ) => {
        const theme = useTheme();
        const getInpFilter = React.useCallback((par: any) => {
            const {检验结论,新下检日,检验条件,环境,现场,检验日期,} =par||{};
            return {检验结论,新下检日,检验条件,环境,现场,检验日期,};
        }, []);
        const {inp, setInp} = useItemInputControl({ ref });
        const [floor, setFloor] = React.useState<string|null>(null);
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={'四、现场检验意见； 附录5：现场检验条件确认'} column={0}>
                <Text  variant="h5">
                    附录5：现场检验条件确认
                </Text>
                1、试验的动力源、环境温度、海拔高度、风速符合标准和设计要求。<br/>
                2、检验现场不得有易燃、易爆以及腐蚀性气体。
                <hr/>
                <div>
                    现场检验条件确认结果的记录:
                    <Table css={{borderCollapse:'collapse'}}>
                        <TableBody>
                            <TableRow >
                                <CCell>确认日期</CCell>
                                <CCell>1、动力源、环境温度、海拔高度、风速</CCell>
                                <CCell>2、现场不得有易燃、易爆以及腐蚀性</CCell>
                            </TableRow>
                            {inp?.检验条件?.map((a:string,i:number)=>{
                                return <TableRow key={i}>
                                    <CCell>{a}</CCell>
                                    <CCell>{inp?.环境?.[a]||''}</CCell>
                                    <CCell>{inp?.现场?.[a]||''}</CCell>
                                </TableRow>
                            }) }
                        </TableBody>
                    </Table>
                </div>
                <>新增检查确认时间=＞</>
                <LineColumn column={5} >
                    <InputLine  label='首先设置当前检验日期'>
                        <SuffixInput  type='date'  value={floor||''} onSave={txt=> setFloor(txt||null)} >
                            <Button onPress={() =>floor&&(inp?.检验条件?.includes(floor)? null:
                                    setInp( (inp?.检验条件&&{...inp,检验条件:[...inp?.检验条件,floor] } )
                                        || {...inp,检验条件:[floor] } )
                            )}
                            >新增</Button>
                            <Button css={{ marginTop: theme.spaces.sm }} size="sm"
                                    onPress={() => floor&&inp?.检验条件?.includes(floor) &&(
                                        setInp({...inp,检验条件:[...inp.检验条件.filter((a:string) => a!==floor )],
                                            环境:{...inp?.环境,[floor]:undefined},
                                            现场:{...inp?.现场,[floor]:undefined},
                                        })
                                    )}
                            >刪除</Button>
                        </SuffixInput>
                    </InputLine>
                    <InputLine label={`1、动力源、环境温度、海拔高度、风速(${floor})`}>
                        <SelectInput value={ inp?.环境?.[floor!] ||''}  list={现场结果选}
                                     onChange={e => floor&&setInp({ ...inp, 环境:{...inp?.环境,[floor]: e.currentTarget.value||undefined} }) }/>
                    </InputLine>
                    <InputLine  label={`2、现场不得有易燃、易爆以及腐蚀性(${floor})`}>
                        <SelectInput value={ inp?.现场?.[floor!] ||''} list={现场结果选}
                                     onChange={e => floor&&setInp({ ...inp, 现场:{...inp?.现场,[floor]: e.currentTarget.value||undefined} }) }/>
                    </InputLine>
                </LineColumn>
                注：每次到现场后，在检验前应对检验条件进行确认，只有确认所有与检验相关的条件满足检验要求时，才能开始开展检验工作。<hr/>
                <Text  variant="h5">
                    四、现场检验意见  (报告下结论)：
                </Text>
                <InputLine  label='四、现场检验意见' >
                    <Select inputSize="md" css={{minWidth:'140px',fontSize:'1.3rem',padding:'0 1rem'}}
                            value={ inp?.检验结论  ||''}
                            onChange={e => setInp({ ...inp, 检验结论: e.currentTarget.value||undefined}) }
                    >
                        <option></option>
                        <option>合格</option>
                        <option>不合格</option>
                    </Select>
                </InputLine>
                <InputLine  label='设置检验日期' >
                    <Input  value={inp?.检验日期 ||''}  type='date'
                            onChange={e => setInp({ ...inp, 检验日期: e.currentTarget.value}) } />
                </InputLine>
                <InputLine  label='下次检验日期' >
                    <Input  value={inp?.新下检日 ||''}  type='date'
                            onChange={e => setInp({ ...inp, 新下检日: e.currentTarget.value}) } />
                </InputLine>
            </InspectRecordLayout>
        );
    } );

/**不要重名了 ['附设装置名称','附设装置'] 可能莫名其妙报错的。台账snapshot.‘安装单位’等不能直接使用的，要本次最新:易变动。
 * 设备概况有些字段不在台账存在的，还有些不想采用台账的数据，还有些事后才能够同步给台账的；
 * */
const dbName设备概况 =[
    {desc:'安全管理人员',name:'安管人员'},{desc:'安全管理人员联系电话',name:'安管电话'},
    {desc:'整改反馈确认期限',name:'整反期限',type:'d'},{desc:'检验意见通知书编号',name:'意见书号'},
    {desc:'其他主要参数',name:'他主要参',type:'B',list:[]},{desc:'备注',name:'设备备注',type:'m'},
];
    //型号规格 ？ 设备型号  驱动装置=门驱动方式
//两个层次的嵌套对象存储模式：存储在"修改项"：{底下的对象分项字段} [标题，存储分项字段]
/**注意这里的ref不是窗口<DIV ref={ref}>的哪一个;而是 React.useRef<InternalItemHandResult>(null)类似的传递数据和接口函数的,不是一个东西;
 * */
export const DeviceSurvey=
    React.forwardRef((
        { children, show ,alone=true,refWidth}:InternalItemProps,  ref
    ) => {
        const getInpFilter = React.useCallback((par: any) => {
            let fields={} as any;
            dbName设备概况.forEach(({name}:any, i:number)=> {
                fields[name] =par[name];
            });
            fields['修改项'] =par?.修改项;         //【特别】两层的对象存储
            return fields;
        }, []);
        const {inp, setInp} = useItemInputControl({ ref });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={'二、设备概况'}>
                没法事前申请变更在台账中生效的还需要修正的设备概况部分:
                <LineColumn  column={3} >
                    {           /* 剔除最后一个”备注“要单独处理的 */
                        dbName设备概况.map(({name,desc,cb,type,unit,list} : any, i:number)=> {
                            // if(i>=dbName设备概况2.length-1)      return <React.Fragment key={i}></React.Fragment>;
                            if(cb?.edit){
                                return  cb.edit(inp,setInp);
                            }
                            else if(type==='l') return <InputLine key={i} label={desc}>
                                    <InputDatalist value={(inp?.[name]) || ''} datalist={list}
                                               onListChange={v => {
                                                   setInp({ ...inp, [name]:v || undefined});
                                               } } />
                                </InputLine>;
                            else if(type==='d') return  <InputLine key={i} label={desc}>
                                    <Input  value={inp?.[name] ||''}  type='date'
                                            onChange={e => setInp({ ...inp, [name]: e.currentTarget.value}) } />
                                </InputLine>;
                            else if(type==='b') return  <InputLine key={i} label={desc}>
                                <CheckSwitch  checked={inp?.[name] || false} onChange={e => setInp({...inp, [name]: inp?.[name]? undefined:true}) } />
                                </InputLine>;
                            else if(type==='B')  return  <InputLine key={i} label={desc}>
                                        <BlobInputList  value={inp?.[name] ||''} datalist={list}
                                                        onListChange={v => setInp({ ...inp, [name]: v || undefined}) } />
                                    </InputLine>;
                            else if(type==='m')  return <div key={i}>{desc}:
                                         <TextArea  value={inp?.[name] ||''} rows={4}
                                            onChange={e => setInp({ ...inp, [name]: e.currentTarget.value||undefined}) } />
                                    </div>;
                            else if(unit) return  <InputLine key={i} label={desc}>
                                    <SuffixInput  value={inp?.[name] ||''} onSave={txt=> setInp({...inp,[name]: txt || undefined })}
                                              type={type==='n'? "number": undefined}>{unit}</SuffixInput>
                                </InputLine>;
                            else return  <InputLine label={desc+`:`} key={i}>
                                    <Input  value={inp?.[name] ||''} type={type==='n'? "number": undefined}
                                            onChange={e => {
                                                setInp({...inp,[name]:e.currentTarget.value || undefined});
                                            } } />
                                </InputLine>;
                        })
                    }
                </LineColumn>

               </InspectRecordLayout>
        );
    } );

/**【针对比较有规律的情况】可以这样干的； 观测数据及测量结果记录 :抽象化后做配置的；特殊有 3.7 （1）；
 * 项目编号 ，类别，分项码，render检验内容与要求， [{检测项目,单位,观测名字，}] 观测名字首字段+o v r ；但是第11项目特殊：省略”间距“；
 * */
export const config观测数据=[
    [[{n:'圈框高',t:'圈框高度',u:'mm'},{n:'离轿顶水',t:'离轿顶外侧边缘有水平方向距离',u:'mm'},
        {n:'护栏高',t:'护栏高度',u:'mm'},
        {n:'间间隔',t:'中间间隔',u:'mm'},{n:'踢脚高',t:'踢脚板高度',u:'mm'}],'3.7.4','C',undefined,<Text>以下分5个子项目的测量：</Text>],
    [[{n:'筒压板数',t:'卷筒上压板数量',u:'个'},{n:'绳夹数',t:'绳夹数量',u:'个'},
        {n:'夹间距',t:'绳夹间距',u:'mm'},{n:'编结长',t:'钢丝绳编结长度',u:'mm'},
        {n:'安全圈数',t:'安全圈数',u:'圈'},{n:'强制钢丝',t:'强制式简易升降机钢丝绳',u:'mm'}],'3.8.2.1','C','(4)',<Text>以下分6个子项目的测量：</Text>],
    [[{n:'绝缘阻',t:'绝缘电阻',u:'MΩ'},],'3.14','C',undefined, null],
];
const item观测机房 : string[]=[];
const itemA观测机房 : string[]=['观测备注'];
//初始化 存储字段
config观测数据.forEach(([_fxArr,_] : any, i:number)=> {
    if(!_fxArr || _fxArr.length<1)    throw new Error("没提供测量子项");
    const itrsName=_fxArr[0]?.n + 'r';
    _fxArr.forEach(({n,}: any, k:number)=> {
        item观测机房.push(n);
    });
    itemA观测机房.push(itrsName);
});
/**观测测量项目 ;
* */
export const ObservationMeasure=
    React.forwardRef((
        { children, show ,alone=true,refWidth}:InternalItemProps,  ref
    ) => {
        const [getInpFilter]=useMeasureInpFilter(item观测机房,itemA观测机房);
        const {inp, setInp} = useItemInputControl({ ref });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={'附录1：观测数据及测量结果记录'}>
                附录1 观测数据及测量结果记录<br/>
                {
                    config观测数据.map(([_fxArr,tag,iclas,fxno,node]: any, i:number)=> {
                        if(!_fxArr || _fxArr.length<1)    throw new Error("没提供测量子项");
                        const itrsName=_fxArr[0]?.n + 'r';     //结论存储在第一个分项目开头的字段
                        return  <React.Fragment key={i}>
                            <Text variant="h5">
                                {iclas} {tag} {fxno}：
                            </Text>
                            { typeof node === "string"?
                                <Text>{node}</Text>
                                :
                                node
                            }
                            <LineColumn  column={4} >
                                {   _fxArr.map(({n,t,u}: any, k:number)=> {
                                      return <React.Fragment key={k} >
                                                { measurementRender(t, n, u, inp, setInp) }
                                            </React.Fragment>;
                                     })
                                }
                                <InputLine label={`${tag} ${fxno??''}结果判定:`} key={i}>
                                    <SelectHookfork value={ inp?.[itrsName] ||''}
                                                    onChange={e => setInp({ ...inp, [itrsName]: e.currentTarget.value||undefined}) }/>
                                </InputLine>
                            </LineColumn>
                        </React.Fragment>;
                    })
                }
                <div>备注:
                    <BlobInputList  value={inp?.['观测备注'] ||''}  rows={6}
                                    onListChange={v => setInp({ ...inp, 观测备注: v || undefined}) } />
                </div>
                注：1、未测量或无需测量的观测值和结果值栏可不填，检验结果栏都需填。（下同）<br/>
                2、其他需记录的测量值和结果值填在备注栏中。<br/>
                3、以设计文件作为检验结果判定依据时，设计要求值填在备注栏内
            </InspectRecordLayout>
        );
    } );

const config见证材料=[['名称','nm',278],['编号','sn',182],] as Each_ZdSetting[];
const itemA见证=['见证表','大备注',];
export const Witness=
    React.forwardRef(({ children, show ,alone=true,refWidth}:InternalItemProps,  ref
    ) => {
        const [getInpFilter]=useMeasureInpFilter(null,itemA见证,);
        const {inp, setInp} = useItemInputControl({ ref });
        const [render见证]=useTableEditor({headview: undefined, config: config见证材料, table:'见证表', inp, setInp});
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={'五、见证材料、六、备注'}>
                五、见证材料
                {render见证}
                <div>六、备注:
                    <BlobInputList  value={inp?.['大备注'] ||''}  rows={5}
                                    datalist={['本报告为复检报告，本次复检仅对上次不合格报告的不合格项进行复检，其余项目单项结论引用上次不合格报告中相对应项目的结论']}
                                    onListChange={v => setInp({ ...inp, 大备注: v || undefined}) } />
                </div>
              注：本备注栏的内容在检验报告附件的备注栏内体现。
            </InspectRecordLayout>
        );
    } );

const config间隙表=[['层站','n',66],['门地厢地坎隙','k',60],['层门净高','H',60,],['门扇间间隙','j',60],['门立柱隙','z',60],['门扇地坎间隙','s',60],
    ['扇施力间隙','p',60],['门锁啮合深','l',60]] as Each_ZdSetting[];
// const item间隙=[];
const itemA间隙=['间隙表','门净高r','门扇隙r','施力隙r','门地间r','锁啮深r'];
export const DoorGap=
    React.forwardRef(({ children, show ,alone=true,refWidth}:InternalItemProps,  ref
    ) => {
        const [getInpFilter]=useMeasureInpFilter(null,itemA间隙,);
        const {inp, setInp} = useItemInputControl({ ref });
        const headview=<Text variant="h5">
          附录2：C5 门间隙、层门净高度、门锁啮合长度检验记录：参照上面样表的第6行的标注的各列的简化后的列名来进行录入,结果行拆出单独录入。单位：mm
        </Text>;
        const [render间隙表]=useTableEditor({inp, setInp,  headview,
            config: config间隙表, table:'间隙表', column:8});
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={'附录2：C5 门间隙、层门净高度、门锁啮合长度检验记录'}>
                样表格式如下：
                <Table tight  miniw={800}><TableBody>
                    <TableRow>
                        <CCell rowSpan={2}>项目编号</CCell><CCell colSpan={7}>C5</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>（1）</CCell><CCell>（1）</CCell><CCell colSpan={3}>（1）</CCell><CCell>（1）</CCell><CCell>（4）</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>检验内容</CCell><CCell>层门地坎与货厢地坎的间隙</CCell><CCell>层门净高度</CCell><CCell>层门门扇间间隙</CCell><CCell>层门扇与立柱间隙</CCell>
                        <CCell>层门扇与地坎间隙</CCell><CCell>层门扇间施力间隙</CCell><CCell>门锁啮合深度</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell rowSpan={2}>判断标准</CCell><CCell rowSpan={2}>0≤x≤35</CCell><CCell rowSpan={2}>x≥1800</CCell><CCell rowSpan={2} colSpan={3}>x≤10</CCell>
                        <CCell>旁开门： x≤30</CCell><CCell rowSpan={2}>x≥7</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>中分门总和： x≤45</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>层站</CCell><CCell>门地厢地坎隙</CCell><CCell>层门净高</CCell><CCell>门扇间间隙</CCell><CCell>门立柱隙</CCell><CCell>门扇地坎间隙</CCell><CCell>扇施力间隙</CCell><CCell>门锁啮合深</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>检验结果</CCell><CCell></CCell><CCell></CCell><CCell colSpan={3}></CCell><CCell></CCell><CCell></CCell>
                    </TableRow>
                </TableBody></Table>
                {render间隙表}
                <hr/>
                上表最后一行结果行的录入拆出来：
                <LineColumn column={6}>
                    <InputLine label={`5（1）层门地坎与货厢地坎的间隙-检验结果`}>
                        <SelectHookfork value={ inp?.门地间r ||''}
                                        onChange={e => setInp({ ...inp, 门地间r: e.currentTarget.value||undefined}) }/>
                    </InputLine>
                    <InputLine label={`5（1）层门净高度-检验结果`}>
                        <SelectHookfork value={ inp?.门净高r ||''}
                                        onChange={e => setInp({ ...inp, 门净高r: e.currentTarget.value||undefined}) }/>
                    </InputLine>
                    <InputLine label={`5（1）门扇间间隙门立柱隙门扇地坎间隙-检验结果`}>
                        <SelectHookfork value={ inp?.门扇隙r ||''}
                                        onChange={e => setInp({ ...inp, 门扇隙r: e.currentTarget.value||undefined}) }/>
                    </InputLine>
                    <InputLine label={`5（1）层门扇间施力间隙-检验结果`}>
                        <SelectHookfork value={ inp?.施力隙r ||''}
                                        onChange={e => setInp({ ...inp, 施力隙r: e.currentTarget.value||undefined}) }/>
                    </InputLine>
                    <InputLine label={`5（4）门锁啮合深度-检验结果`}>
                        <SelectHookfork value={ inp?.锁啮深r ||''}
                                        onChange={e => setInp({ ...inp, 锁啮深r: e.currentTarget.value||undefined}) }/>
                    </InputLine>
                </LineColumn>
                注：1、对于不合格的值才需测量和记录，未测量或无需测量的观测值和结果值栏可不填，检验结果栏都需填。<br/>
                2、以设计文件作为检验结果判定依据时，设计要求值填在备注栏内。
            </InspectRecordLayout>
        );
    } );

const item受力梯子=['力面厚1','力面厚2','力面厚3',];
const itemA受力梯子=['力面厚设','力面厚v','力面厚r','力面备注',];
export const Thickness=
    React.forwardRef(({ children, show ,alone=true,refWidth}:InternalItemProps,  ref
    ) => {
        const [getInpFilter]=useMeasureInpFilter(item受力梯子, itemA受力梯子, );        //hook死循环：改成外部定义callbackFilt  输入变量defaultV可变的。
        const {inp, setInp} = useItemInputControl({ ref });
        const aveThick=calcAverageArrObj([inp?.力面厚1o,inp?.力面厚2o,inp?.力面厚3o],(row)=>row,2);
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={'附录3：C3.7.3 主要受力结构件断面有效厚度观测值及测量结果记录表'}>
                附录3：C3.7.3 主要受力结构件断面有效厚度观测值及测量结果记录表<br/>
                序号1，主要受力结构件断面有效厚度，设计值（    ）mm：
                <LineColumn column={2} >
                    <InputLine  label='受力结构件断面有效厚度，设计值：' >
                        <SuffixInput  value={inp?.力面厚设 ||''} onSave={txt=> setInp({...inp,力面厚设: txt || undefined })}>mm</SuffixInput>
                    </InputLine>
                    { measurementRender(`受力结构件断面有效厚度观测值-1`,'力面厚1','mm',inp,setInp,true) }
                    { measurementRender('有效厚度观测值-2','力面厚2','mm',inp,setInp,true) }
                    { measurementRender('有效厚度观测值-3','力面厚3','mm',inp,setInp,true) }
                    <InputLine  label='主要受力结构件断面有效厚度平均值：'>
                        <Text>{aveThick} mm</Text>
                    </InputLine>
                    <InputLine  label='主要受力结构件断面有效厚度-结果值：' >
                        <SuffixInput  value={inp?.力面厚v ||''} onSave={txt=> setInp({...inp,力面厚v: txt || undefined })}>mm</SuffixInput>
                    </InputLine>
                    <InputLine label='C3.7.3检验结果'>
                        <SelectHookfork value={ inp?.力面厚r ||''}
                                        onChange={e => setInp({ ...inp, 力面厚r: e.currentTarget.value||undefined}) }/>
                    </InputLine>
                </LineColumn>
                备注：
                <TextArea  value={inp?.力面备注 ||''} rows={2}
                           onChange={e => setInp({ ...inp, 力面备注: e.currentTarget.value||undefined}) } />
                注：对于不合格的值才需测量和记录，仅记录有效厚度与设计值之比最小值之处的测量值。
            </InspectRecordLayout>
        );
    } );

export const config漏磁检=[['测量点','n',100],['左端','l',92],['中间','m',92],['右端','R',92],['结果值','r',92]] as Each_ZdSetting[];
const 默认漏磁检=[{n:'2mm'},{n:'50mm'},{n:'100mm'}];
const itemA漏磁检=['漏磁表','漏磁表r','漏磁备注','附设表',];
const callbackMagnetic=(par: any)=>{
    const { 漏磁表,}=par;
    if(!漏磁表)   par.漏磁表=默认漏磁检;       //需剔除掉固定显示数据的'n'字段：避免保存给数据库！。
    return  par;
}
export const Magnetic=
    React.forwardRef(({ children, show ,alone=true,refWidth}:InternalItemProps,  ref
    ) => {
        const [getInpFilter]=useMeasureInpFilter(null, itemA漏磁检, callbackMagnetic);
        const {inp, setInp} = useItemInputControl({ ref });
        const breaks=[210,352,620,960];
        const headview=<Text variant="h5">
            附录4：C4.9.8.1漏磁检查记录表：单位：Gs<br/>
            磁场强度：
        </Text>;
        const [render漏磁检]=useTableEditor({breaks, inp, setInp,  headview,
            config: config漏磁检, table:'漏磁表', column:4,  defaultV:默认漏磁检, noDelAdd:true, fixColumn:1,maxRf:3});

        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={'附录4：C4.9.8.1漏磁检查记录表'}>
                {render漏磁检}
                <InputLine label='附录10：C4.9.8.1漏磁检查记录表-检验结果'>
                    <SelectHookfork value={ inp?.漏磁表r ||''}
                                    onChange={e => setInp({ ...inp, 漏磁表r: e.currentTarget.value||undefined}) }/>
                </InputLine>
                备注：
                <TextArea  value={inp?.漏磁备注 ||''} rows={5}
                           onChange={e => setInp({ ...inp, 漏磁备注: e.currentTarget.value||undefined}) } />
            </InspectRecordLayout>
        );
    } );

